[V0_FILE]sql:file="scripts/001_create_schema.sql" isMerged="true" -- Create profiles table create table if not exists public.profiles ( id uuid primary key references auth.users(id) on delete cascade, email text not null, full_name text, display_name text, bio text, profile_image_url text, phone text, date_of_birth date, city text, country text default 'Chile', -- Verification and safety is_verified boolean default false, verification_method text, -- 'id_card', 'social_media', etc. verification_date timestamptz, reputation_score integer default 0, total_events_attended integer default 0, total_events_created integer default 0, -- Preferences preferred_sports text[], -- array of sport types skill_levels jsonb, -- {cycling: 'intermediate', running: 'beginner'} -- Timestamps created_at timestamptz default now(), updated_at timestamptz default now() ); -- Create events table create table if not exists public.events ( id uuid primary key default gen_random_uuid(), creator_id uuid not null references public.profiles(id) on delete cascade, -- Event details title text not null, description text, sport_type text not null, -- 'cycling', 'mtb', 'trail_running', 'trekking', 'running' difficulty_level text not null, -- 'beginner', 'intermediate', 'advanced' -- Location meeting_point text not null, meeting_point_lat decimal(10, 8), meeting_point_lng decimal(11, 8), route_description text, distance_km decimal(6, 2), elevation_gain_m integer, -- Timing event_date date not null, event_time time not null, estimated_duration_minutes integer, -- Capacity max_participants integer, current_participants integer default 1, -- creator is first participant -- Status status text default 'open', -- 'open', 'full', 'cancelled', 'completed' is_public boolean default true, -- Safety emergency_contact text, required_equipment text[], safety_notes text, -- Timestamps created_at timestamptz default now(), updated_at timestamptz default now() ); -- Create event_participants table create table if not exists public.event_participants ( id uuid primary key default gen_random_uuid(), event_id uuid not null references public.events(id) on delete cascade, user_id uuid not null references public.profiles(id) on delete cascade, -- Participation details status text default 'confirmed', -- 'confirmed', 'cancelled', 'attended' joined_at timestamptz default now(), -- Unique constraint: one user per event unique(event_id, user_id) ); -- Create groups table (for influencers/leaders) create table if not exists public.groups ( id uuid primary key default gen_random_uuid(), leader_id uuid not null references public.profiles(id) on delete cascade, -- Group details name text not null, description text, sport_type text not null, group_image_url text, -- Settings is_private boolean default false, max_members integer, current_members integer default 1, -- Timestamps created_at timestamptz default now(), updated_at timestamptz default now() ); -- Create group_members table create table if not exists public.group_members ( id uuid primary key default gen_random_uuid(), group_id uuid not null references public.groups(id) on delete cascade, user_id uuid not null references public.profiles(id) on delete cascade, -- Membership details role text default 'member', -- 'leader', 'admin', 'member' joined_at timestamptz default now(), -- Unique constraint: one user per group unique(group_id, user_id) ); -- Create notifications table create table if not exists public.notifications ( id uuid primary key default gen_random_uuid(), user_id uuid not null references public.profiles(id) on delete cascade, -- Notification details type text not null, -- 'event_invite', 'event_reminder', 'group_invite', 'safety_alert' title text not null, message text not null, -- Related entities related_event_id uuid references public.events(id) on delete cascade, related_group_id uuid references public.groups(id) on delete cascade, -- Status is_read boolean default false, read_at timestamptz, -- Timestamps created_at timestamptz default now() ); -- Enable Row Level Security on all tables alter table public.profiles enable row level security; alter table public.events enable row level security; alter table public.event_participants enable row level security; alter table public.groups enable row level security; alter table public.group_members enable row level security; alter table public.notifications enable row level security; -- RLS Policies for profiles create policy "profiles_select_all" on public.profiles for select using (true); -- Everyone can view profiles create policy "profiles_insert_own" on public.profiles for insert with check (auth.uid() = id); create policy "profiles_update_own" on public.profiles for update using (auth.uid() = id); create policy "profiles_delete_own" on public.profiles for delete using (auth.uid() = id); -- RLS Policies for events create policy "events_select_all" on public.events for select using (true); -- Everyone can view public events create policy "events_insert_own" on public.events for insert with check (auth.uid() = creator_id); create policy "events_update_own" on public.events for update using (auth.uid() = creator_id); create policy "events_delete_own" on public.events for delete using (auth.uid() = creator_id); -- RLS Policies for event_participants create policy "participants_select_all" on public.event_participants for select using (true); -- Everyone can see who's participating create policy "participants_insert_own" on public.event_participants for insert with check (auth.uid() = user_id); create policy "participants_update_own" on public.event_participants for update using (auth.uid() = user_id); create policy "participants_delete_own" on public.event_participants for delete using (auth.uid() = user_id); -- RLS Policies for groups create policy "groups_select_all" on public.groups for select using (true); -- Everyone can view groups create policy "groups_insert_own" on public.groups for insert with check (auth.uid() = leader_id); create policy "groups_update_own" on public.groups for update using (auth.uid() = leader_id); create policy "groups_delete_own" on public.groups for delete using (auth.uid() = leader_id); -- RLS Policies for group_members create policy "group_members_select_all" on public.group_members for select using (true); -- Everyone can see group members create policy "group_members_insert_own" on public.group_members for insert with check (auth.uid() = user_id); create policy "group_members_update_own" on public.group_members for update using (auth.uid() = user_id); create policy "group_members_delete_own" on public.group_members for delete using (auth.uid() = user_id); -- RLS Policies for notifications create policy "notifications_select_own" on public.notifications for select using (auth.uid() = user_id); create policy "notifications_insert_own" on public.notifications for insert with check (auth.uid() = user_id); create policy "notifications_update_own" on public.notifications for update using (auth.uid() = user_id); create policy "notifications_delete_own" on public.notifications for delete using (auth.uid() = user_id); -- Create indexes for better performance create index if not exists idx_events_sport_type on public.events(sport_type); create index if not exists idx_events_date on public.events(event_date); create index if not exists idx_events_creator on public.events(creator_id); create index if not exists idx_event_participants_event on public.event_participants(event_id); create index if not exists idx_event_participants_user on public.event_participants(user_id); create index if not exists idx_groups_sport_type on public.groups(sport_type); create index if not exists idx_notifications_user on public.notifications(user_id); create index if not exists idx_notifications_unread on public.notifications(user_id, is_read); -- Create updated_at trigger function create or replace function public.handle_updated_at() returns trigger language plpgsql as $$ begin new.updated_at = now(); return new; end; $$; -- Add updated_at triggers create trigger profiles_updated_at before update on public.profiles for each row execute function public.handle_updated_at(); create trigger events_updated_at before update on public.events for each row execute function public.handle_updated_at(); create trigger groups_updated_at before update on public.groups for each row execute function public.handle_updated_at(); [V0_FILE]typescript:file="middleware.ts" isMerged="true" import { updateSession } from "@/lib/supabase/middleware" import type { NextRequest } from "next/server" export async function middleware(request: NextRequest) { return await updateSession(request) } export const config = { matcher: ["/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)"], } [V0_FILE]typescriptreact:file="app/auth/sign-up-success/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import Link from "next/link" import { Mail } from "lucide-react" export default function SignUpSuccessPage() { return (

Check Your Email We've sent you a confirmation link

Please check your email and click the confirmation link to activate your account. Once confirmed, you'll be able to sign in and start using SafeMove.

) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { Button } from "@/components/ui/button" import Link from "next/link" import { Shield, Users, MapPin, Award } from "lucide-react" export default function LandingPage() { return (

{/* Hero Section */}

SafeMove

Connect with verified women athletes for safe group sports activities

Join cycling, running, trekking, and trail adventures with a trusted community

{/* Features Grid */}

Verified Members

All members are identity-verified for your safety and peace of mind

Community Groups

Join groups led by experienced athletes and influencers

Local Events

Discover and join sports events in your area with detailed routes

Build Reputation

Earn reputation points by participating and creating events

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.4", "next-themes": "^0.4.6", "react": "19.1.0", "react-day-picker": "9.8.0", "react-dom": "19.1.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76", "@supabase/ssr": "0.7.0" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/sport-selector.tsx" isMerged="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { useRouter } from "next/navigation" import { Bike, Mountain, Footprints, TreePine, PersonStanding } from "lucide-react" const sports = [ { id: "cycling", name: "Cycling", icon: Bike, color: "from-pink-400 to-pink-600", bgColor: "bg-pink-50 hover:bg-pink-100", description: "Road cycling adventures", }, { id: "mtb", name: "Mountain Bike", icon: Mountain, color: "from-purple-400 to-purple-600", bgColor: "bg-purple-50 hover:bg-purple-100", description: "Off-road trails", }, { id: "trail_running", name: "Trail Running", icon: TreePine, color: "from-teal-400 to-teal-600", bgColor: "bg-teal-50 hover:bg-teal-100", description: "Nature trail runs", }, { id: "trekking", name: "Trekking", icon: Footprints, color: "from-orange-400 to-orange-600", bgColor: "bg-orange-50 hover:bg-orange-100", description: "Hiking adventures", }, { id: "running", name: "Running", icon: PersonStanding, color: "from-rose-400 to-rose-600", bgColor: "bg-rose-50 hover:bg-rose-100", description: "Urban running groups", }, ] export function SportSelector() { const router = useRouter() const handleSportClick = (sportId: string) => { router.push(`/events?sport=${sportId}`) } return (

{sports.map((sport) => { const Icon = sport.icon return ( handleSportClick(sport.id)} >

{sport.name}

{sport.description}

) })}

) } [V0_FILE]typescriptreact:file="app/events/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { createClient } from "@/lib/supabase/server" import { EventsList } from "@/components/events-list" import { Button } from "@/components/ui/button" import { Plus, ArrowLeft } from "lucide-react" import Link from "next/link" export default async function EventsPage({ searchParams }: { searchParams: Promise<{ sport?: string }> }) { const supabase = await createClient() const params = await searchParams const { data: { user }, } = await supabase.auth.getUser() if (!user) { redirect("/auth/login") } const sportType = params.sport || "all" // Fetch events based on sport filter let query = supabase .from("events") .select( ` *, creator:profiles!events_creator_id_fkey(id, full_name, display_name, is_verified, reputation_score), participants:event_participants(count) `, ) .eq("status", "open") .gte("event_date", new Date().toISOString().split("T")[0]) .order("event_date", { ascending: true }) if (sportType !== "all") { query = query.eq("sport_type", sportType) } const { data: events } = await query const sportNames: Record = { cycling: "Cycling", mtb: "Mountain Bike", trail_running: "Trail Running", trekking: "Trekking", running: "Running", all: "All Sports", } return (

{/* Header */}

{sportNames[sportType]}

{/* Main Content */}

) } [V0_FILE]typescriptreact:file="components/events-list.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Calendar, MapPin, Users, TrendingUp, Shield } from "lucide-react" import Link from "next/link" import { format } from "date-fns" type Event = { id: string title: string description: string sport_type: string difficulty_level: string meeting_point: string event_date: string event_time: string max_participants: number current_participants: number distance_km: number creator: { full_name: string display_name: string is_verified: boolean reputation_score: number } } const difficultyColors: Record = { beginner: "bg-green-100 text-green-700 border-green-200", intermediate: "bg-yellow-100 text-yellow-700 border-yellow-200", advanced: "bg-red-100 text-red-700 border-red-200", } const sportColors: Record = { cycling: "from-pink-400 to-pink-600", mtb: "from-purple-400 to-purple-600", trail_running: "from-teal-400 to-teal-600", trekking: "from-orange-400 to-orange-600", running: "from-rose-400 to-rose-600", } export function EventsList({ events }: { events: Event[] }) { if (events.length === 0) { return (

No events found. Be the first to create one!

) } return (

{events.map((event) => (

{event.title}

{event.difficulty_level} {event.creator.is_verified && ( Verified )}

{event.description}

{format(new Date(event.event_date), "MMM d, yyyy")} at {event.event_time}

{event.meeting_point}

{event.current_participants}/{event.max_participants || "∞"} participants

{event.distance_km && (

{event.distance_km} km

)}

Organized by {event.creator.display_name || event.creator.full_name}

))}

) } [V0_FILE]typescriptreact:file="components/join-event-button.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { createClient } from "@/lib/supabase/client" import { useRouter } from "next/navigation" import { useState } from "react" import { UserPlus, UserMinus } from "lucide-react" export function JoinEventButton({ eventId, isParticipating }: { eventId: string; isParticipating: boolean }) { const [loading, setLoading] = useState(false) const [participating, setParticipating] = useState(isParticipating) const router = useRouter() const handleJoinEvent = async () => { setLoading(true) const supabase = createClient() try { const { data: { user }, } = await supabase.auth.getUser() if (!user) { router.push("/auth/login") return } if (participating) { // Leave event const { error } = await supabase .from("event_participants") .delete() .eq("event_id", eventId) .eq("user_id", user.id) if (error) throw error // Update event participant count const { data: event } = await supabase.from("events").select("current_participants").eq("id", eventId).single() if (event) { await supabase .from("events") .update({ current_participants: Math.max(0, event.current_participants - 1) }) .eq("id", eventId) } setParticipating(false) } else { // Join event const { error } = await supabase.from("event_participants").insert({ event_id: eventId, user_id: user.id, status: "confirmed", }) if (error) throw error // Update event participant count const { data: event } = await supabase.from("events").select("current_participants").eq("id", eventId).single() if (event) { await supabase .from("events") .update({ current_participants: event.current_participants + 1 }) .eq("id", eventId) } setParticipating(true) } router.refresh() } catch (error) { console.error("[v0] Error joining/leaving event:", error) alert("Failed to update participation status. Please try again.") } finally { setLoading(false) } } return ( ) } [V0_FILE]typescriptreact:file="app/events/create/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { createClient } from "@/lib/supabase/server" import { CreateEventForm } from "@/components/create-event-form" import { Button } from "@/components/ui/button" import { ArrowLeft } from "lucide-react" import Link from "next/link" export default async function CreateEventPage() { const supabase = await createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { redirect("/auth/login") } return (

{/* Header */}

Create New Event

{/* Main Content */}

) } [V0_FILE]typescriptreact:file="components/create-event-form.tsx" isMerged="true" "use client" import type React from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { createClient } from "@/lib/supabase/client" import { useRouter } from "next/navigation" import { useState } from "react" export function CreateEventForm({ userId }: { userId: string }) { const router = useRouter() const [loading, setLoading] = useState(false) const [formData, setFormData] = useState({ title: "", description: "", sport_type: "", difficulty_level: "", meeting_point: "", event_date: "", event_time: "", max_participants: "", distance_km: "", elevation_gain_m: "", estimated_duration_minutes: "", route_description: "", safety_notes: "", required_equipment: "", }) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setLoading(true) const supabase = createClient() try { const { data, error } = await supabase .from("events") .insert({ creator_id: userId, title: formData.title, description: formData.description, sport_type: formData.sport_type, difficulty_level: formData.difficulty_level, meeting_point: formData.meeting_point, event_date: formData.event_date, event_time: formData.event_time, max_participants: formData.max_participants ? Number.parseInt(formData.max_participants) : null, distance_km: formData.distance_km ? Number.parseFloat(formData.distance_km) : null, elevation_gain_m: formData.elevation_gain_m ? Number.parseInt(formData.elevation_gain_m) : null, estimated_duration_minutes: formData.estimated_duration_minutes ? Number.parseInt(formData.estimated_duration_minutes) : null, route_description: formData.route_description || null, safety_notes: formData.safety_notes || null, required_equipment: formData.required_equipment ? formData.required_equipment.split(",").map((item) => item.trim()) : null, status: "open", }) .select() .single() if (error) throw error // Add creator as first participant await supabase.from("event_participants").insert({ event_id: data.id, user_id: userId, status: "confirmed", }) // Update user's event count const { data: profile } = await supabase.from("profiles").select("total_events_created").eq("id", userId).single() if (profile) { await supabase .from("profiles") .update({ total_events_created: (profile.total_events_created || 0) + 1, reputation_score: (profile.total_events_created || 0) + 1 * 10, // 10 points per event created }) .eq("id", userId) } router.push(`/events/${data.id}`) } catch (error) { console.error("[v0] Error creating event:", error) alert("Failed to create event. Please try again.") } finally { setLoading(false) } } return ( Event Details

{/* Basic Information */}

Event Title * setFormData({ ...formData, title: e.target.value })} placeholder="Morning Trail Run at Cerro San Cristóbal" />

Description *

setFormData({ ...formData, description: e.target.value })}
                placeholder="Describe your event..."
                rows={4}
              />
            </div>

<div className="grid md:grid-cols-2 gap-4">
              <div>
                <Label htmlFor="sport_type">Sport Type *</Label>
                <Select
                  value={formData.sport_type}
                  onValueChange={(value) => setFormData({ ...formData, sport_type: value })}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Select sport" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="cycling">Cycling</SelectItem>
                    <SelectItem value="mtb">Mountain Bike</SelectItem>
                    <SelectItem value="trail_running">Trail Running</SelectItem>
                    <SelectItem value="trekking">Trekking</SelectItem>
                    <SelectItem value="running">Running</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div>
                <Label htmlFor="difficulty_level">Difficulty Level *</Label>
                <Select
                  value={formData.difficulty_level}
                  onValueChange={(value) => setFormData({ ...formData, difficulty_level: value })}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Select difficulty" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="beginner">Beginner</SelectItem>
                    <SelectItem value="intermediate">Intermediate</SelectItem>
                    <SelectItem value="advanced">Advanced</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </div>

{/* Location & Time */}
          <div className="space-y-4 pt-4 border-t border-gray-100">
            <h3 className="font-semibold text-gray-800">Location & Time</h3>

<div>
              <Label htmlFor="meeting_point">Meeting Point *</Label>
              <Input
                id="meeting_point"
                required
                value={formData.meeting_point}
                onChange={(e) => setFormData({ ...formData, meeting_point: e.target.value })}
                placeholder="Plaza de Armas, Santiago"
              />
            </div>

<div className="grid md:grid-cols-2 gap-4">
              <div>
                <Label htmlFor="event_date">Date *</Label>
                <Input
                  id="event_date"
                  type="date"
                  required
                  value={formData.event_date}
                  onChange={(e) => setFormData({ ...formData, event_date: e.target.value })}
                />
              </div>

<div>
                <Label htmlFor="event_time">Time *</Label>
                <Input
                  id="event_time"
                  type="time"
                  required
                  value={formData.event_time}
                  onChange={(e) => setFormData({ ...formData, event_time: e.target.value })}
                />
              </div>
            </div>
          </div>

{/* Event Details */}
          <div className="space-y-4 pt-4 border-t border-gray-100">
            <h3 className="font-semibold text-gray-800">Event Details</h3>

<div className="grid md:grid-cols-2 gap-4">
              <div>
                <Label htmlFor="max_participants">Max Participants</Label>
                <Input
                  id="max_participants"
                  type="number"
                  value={formData.max_participants}
                  onChange={(e) => setFormData({ ...formData, max_participants: e.target.value })}
                  placeholder="Leave empty for unlimited"
                />
              </div>

<div>
                <Label htmlFor="distance_km">Distance (km)</Label>
                <Input
                  id="distance_km"
                  type="number"
                  step="0.1"
                  value={formData.distance_km}
                  onChange={(e) => setFormData({ ...formData, distance_km: e.target.value })}
                  placeholder="10.5"
                />
              </div>

<div>
                <Label htmlFor="elevation_gain_m">Elevation Gain (m)</Label>
                <Input
                  id="elevation_gain_m"
                  type="number"
                  value={formData.elevation_gain_m}
                  onChange={(e) => setFormData({ ...formData, elevation_gain_m: e.target.value })}
                  placeholder="250"
                />
              </div>

<div>
                <Label htmlFor="estimated_duration_minutes">Duration (minutes)</Label>
                <Input
                  id="estimated_duration_minutes"
                  type="number"
                  value={formData.estimated_duration_minutes}
                  onChange={(e) => setFormData({ ...formData, estimated_duration_minutes: e.target.value })}
                  placeholder="120"
                />
              </div>
            </div>

<div>
              <Label htmlFor="route_description">Route Description</Label>
              <Textarea
                id="route_description"
                value={formData.route_description}
                onChange={(e) => setFormData({ ...formData, route_description: e.target.value })}
                placeholder="Describe the route, terrain, and any notable landmarks..."
                rows={3}
              />
            </div>
          </div>

{/* Safety Information */}
          <div className="space-y-4 pt-4 border-t border-gray-100">
            <h3 className="font-semibold text-gray-800">Safety Information</h3>

<div>
              <Label htmlFor="safety_notes">Safety Notes</Label>
              <Textarea
                id="safety_notes"
                value={formData.safety_notes}
                onChange={(e) => setFormData({ ...formData, safety_notes: e.target.value })}
                placeholder="Any safety considerations participants should know..."
                rows={3}
              />
            </div>

<div>
              <Label htmlFor="required_equipment">Required Equipment (comma-separated)</Label>
              <Input
                id="required_equipment"
                value={formData.required_equipment}
                onChange={(e) => setFormData({ ...formData, required_equipment: e.target.value })}
                placeholder="Helmet, Water bottle, Sunscreen"
              />
            </div>
          </div>

<Button
            type="submit"
            disabled={loading}
            className="w-full h-12 bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700"
          >
            {loading ? "Creating Event..." : "Create Event"}
          </Button>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/groups/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { GroupsList } from "@/components/groups-list"
import { Button } from "@/components/ui/button"
import { Plus, ArrowLeft } from "lucide-react"
import Link from "next/link"

export default async function GroupsPage() {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

// Fetch all groups
  const { data: groups } = await supabase
    .from("groups")
    .select(
      `
      *,
      leader:profiles!groups_leader_id_fkey(id, full_name, display_name, is_verified, reputation_score)
    `,
    )
    .order("created_at", { ascending: false })

{/* Main Content */}
      <main className="container mx-auto px-4 py-8">
        <GroupsList groups={groups || []} />
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/groups-list.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Users, Shield, Lock } from "lucide-react"
import Link from "next/link"

type Group = {
  id: string
  name: string
  description: string
  sport_type: string
  is_private: boolean
  max_members: number
  current_members: number
  leader: {
    full_name: string
    display_name: string
    is_verified: boolean
    reputation_score: number
  }
}

const sportColors: Record<string, string> = {
  cycling: "from-pink-400 to-pink-600",
  mtb: "from-purple-400 to-purple-600",
  trail_running: "from-teal-400 to-teal-600",
  trekking: "from-orange-400 to-orange-600",
  running: "from-rose-400 to-rose-600",
}

export function GroupsList({ groups }: { groups: Group[] }) {
  if (groups.length === 0) {
    return (
      <div className="text-center py-12">
        <p className="text-lg text-gray-600">No groups found. Be the first to create one!</p>
      </div>
    )
  }

return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {groups.map((group) => (
        <Link key={group.id} href={`/groups/${group.id}`}>
          <Card className="hover:shadow-lg transition-all hover:scale-[1.02] cursor-pointer border-0 bg-white/80 backdrop-blur h-full">
            <CardHeader className="space-y-3">
              <div className="flex items-start justify-between gap-2">
                <h3 className="font-semibold text-lg text-gray-800 line-clamp-2">{group.name}</h3>
                <div
                  className={`w-10 h-10 rounded-full bg-gradient-to-r ${sportColors[group.sport_type]} flex-shrink-0`}
                />
              </div>
              <div className="flex items-center gap-2 flex-wrap">
                <Badge variant="outline" className="bg-purple-50 text-purple-700 border-purple-200">
                  {group.sport_type.replace("_", " ")}
                </Badge>
                {group.is_private && (
                  <Badge variant="outline" className="bg-gray-100 text-gray-700 border-gray-200">
                    <Lock className="w-3 h-3 mr-1" />
                    Private
                  </Badge>
                )}
                {group.leader.is_verified && (
                  <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
                    <Shield className="w-3 h-3 mr-1" />
                    Verified
                  </Badge>
                )}
              </div>
            </CardHeader>
            <CardContent className="space-y-3">
              <p className="text-sm text-gray-600 line-clamp-3">{group.description}</p>

<div className="flex items-center gap-2 text-sm text-gray-600">
                <Users className="w-4 h-4" />
                <span>
                  {group.current_members}/{group.max_members || "∞"} members
                </span>
              </div>

<div className="pt-2 border-t border-gray-100">
                <p className="text-xs text-gray-500">Led by {group.leader.display_name || group.leader.full_name}</p>
              </div>
            </CardContent>
          </Card>
        </Link>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/groups/[id]/page.tsx" isMerged="true"
import { redirect, notFound } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Users, Shield, Lock, ArrowLeft } from "lucide-react"
import Link from "next/link"
import { JoinGroupButton } from "@/components/join-group-button"

export default async function GroupDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const supabase = await createClient()
  const { id } = await params

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

// Fetch group details
  const { data: group, error } = await supabase
    .from("groups")
    .select(
      `
      *,
      leader:profiles!groups_leader_id_fkey(id, full_name, display_name, is_verified, reputation_score, profile_image_url)
    `,
    )
    .eq("id", id)
    .single()

if (error || !group) {
    notFound()
  }

// Check if user is already a member
  const { data: membership } = await supabase
    .from("group_members")
    .select("*")
    .eq("group_id", id)
    .eq("user_id", user.id)
    .single()

const isMember = !!membership
  const isLeader = group.leader_id === user.id

// Fetch members
  const { data: members } = await supabase
    .from("group_members")
    .select(
      `
      *,
      user:profiles!group_members_user_id_fkey(id, full_name, display_name, is_verified, reputation_score, profile_image_url)
    `,
    )
    .eq("group_id", id)

// Fetch group events
  const { data: groupEvents } = await supabase
    .from("events")
    .select("*")
    .eq("creator_id", group.leader_id)
    .eq("sport_type", group.sport_type)
    .gte("event_date", new Date().toISOString().split("T")[0])
    .order("event_date", { ascending: true })
    .limit(5)

{/* Main Content */}
      <main className="container mx-auto px-4 py-8 max-w-4xl">
        <div className="space-y-6">
          {/* Group Header Card */}
          <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
            <CardHeader className="space-y-4">
              <div className="flex items-start justify-between gap-4">
                <div className="flex-1">
                  <h2 className="text-3xl font-bold text-gray-800 mb-3">{group.name}</h2>
                  <div className="flex items-center gap-2 flex-wrap">
                    <Badge variant="outline" className="bg-purple-50 text-purple-700 border-purple-200">
                      {group.sport_type.replace("_", " ")}
                    </Badge>
                    {group.is_private && (
                      <Badge variant="outline" className="bg-gray-100 text-gray-700 border-gray-200">
                        <Lock className="w-3 h-3 mr-1" />
                        Private Group
                      </Badge>
                    )}
                    {group.leader.is_verified && (
                      <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
                        <Shield className="w-3 h-3 mr-1" />
                        Verified Leader
                      </Badge>
                    )}
                  </div>
                </div>
              </div>

<p className="text-gray-700 leading-relaxed">{group.description}</p>
            </CardHeader>

<CardContent className="space-y-6">
              {/* Group Stats */}
              <div className="flex items-center gap-6">
                <div className="flex items-center gap-2">
                  <Users className="w-5 h-5 text-purple-600" />
                  <span className="font-semibold text-gray-800">
                    {group.current_members}/{group.max_members || "∞"} members
                  </span>
                </div>
              </div>

{/* Join Button */}
              {!isLeader && <JoinGroupButton groupId={group.id} isMember={isMember} />}

{isLeader && (
                <Badge variant="outline" className="bg-purple-50 text-purple-700 border-purple-200">
                  You are the leader of this group
                </Badge>
              )}
            </CardContent>
          </Card>

{/* Leader Card */}
          <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
            <CardHeader>
              <CardTitle>Group Leader</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 flex items-center justify-center text-white font-semibold text-lg">
                  {(group.leader.display_name || group.leader.full_name || "U")[0].toUpperCase()}
                </div>
                <div className="flex-1">
                  <div className="flex items-center gap-2">
                    <p className="font-semibold text-gray-800">{group.leader.display_name || group.leader.full_name}</p>
                    {group.leader.is_verified && <Shield className="w-4 h-4 text-blue-600" />}
                  </div>
                  <p className="text-sm text-gray-600">Reputation: {group.leader.reputation_score} points</p>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Members Card */}
          {members && members.length > 0 && (
            <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
              <CardHeader>
                <CardTitle>Members ({members.length})</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {members.map((member) => (
                    <div key={member.id} className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-full bg-gradient-to-r from-teal-400 to-teal-600 flex items-center justify-center text-white font-semibold">
                        {(member.user.display_name || member.user.full_name || "U")[0].toUpperCase()}
                      </div>
                      <div className="flex-1">
                        <div className="flex items-center gap-2">
                          <p className="font-medium text-gray-800">
                            {member.user.display_name || member.user.full_name}
                          </p>
                          {member.user.is_verified && <Shield className="w-3 h-3 text-blue-600" />}
                          {member.role === "leader" && (
                            <Badge variant="outline" className="bg-purple-50 text-purple-700 border-purple-200 text-xs">
                              Leader
                            </Badge>
                          )}
                        </div>
                        <p className="text-xs text-gray-500">Reputation: {member.user.reputation_score} points</p>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}

{/* Upcoming Events */}
          {groupEvents && groupEvents.length > 0 && (
            <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
              <CardHeader>
                <CardTitle>Upcoming Events</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {groupEvents.map((event) => (
                    <Link
                      key={event.id}
                      href={`/events/${event.id}`}
                      className="block p-3 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors"
                    >
                      <p className="font-medium text-gray-800">{event.title}</p>
                      <p className="text-sm text-gray-600">
                        {new Date(event.event_date).toLocaleDateString()} at {event.event_time}
                      </p>
                    </Link>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/join-group-button.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { createClient } from "@/lib/supabase/client"
import { useRouter } from "next/navigation"
import { useState } from "react"
import { UserPlus, UserMinus } from "lucide-react"

export function JoinGroupButton({ groupId, isMember }: { groupId: string; isMember: boolean }) {
  const [loading, setLoading] = useState(false)
  const [member, setMember] = useState(isMember)
  const router = useRouter()

const handleJoinGroup = async () => {
    setLoading(true)
    const supabase = createClient()

try {
      const {
        data: { user },
      } = await supabase.auth.getUser()

if (!user) {
        router.push("/auth/login")
        return
      }

if (member) {
        // Leave group
        const { error } = await supabase.from("group_members").delete().eq("group_id", groupId).eq("user_id", user.id)

if (error) throw error

// Update group member count
        const { data: group } = await supabase.from("groups").select("current_members").eq("id", groupId).single()

if (group) {
          await supabase
            .from("groups")
            .update({ current_members: Math.max(0, group.current_members - 1) })
            .eq("id", groupId)
        }

setMember(false)
      } else {
        // Join group
        const { error } = await supabase.from("group_members").insert({
          group_id: groupId,
          user_id: user.id,
          role: "member",
        })

if (error) throw error

// Update group member count
        const { data: group } = await supabase.from("groups").select("current_members").eq("id", groupId).single()

if (group) {
          await supabase
            .from("groups")
            .update({ current_members: group.current_members + 1 })
            .eq("id", groupId)
        }

setMember(true)
      }

router.refresh()
    } catch (error) {
      console.error("[v0] Error joining/leaving group:", error)
      alert("Failed to update membership status. Please try again.")
    } finally {
      setLoading(false)
    }
  }

return (
    <Button
      onClick={handleJoinGroup}
      disabled={loading}
      className={
        member
          ? "w-full h-12 bg-gray-200 hover:bg-gray-300 text-gray-700"
          : "w-full h-12 bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700"
      }
    >
      {loading ? (
        "Processing..."
      ) : member ? (
        <>
          <UserMinus className="w-4 h-4 mr-2" />
          Leave Group
        </>
      ) : (
        <>
          <UserPlus className="w-4 h-4 mr-2" />
          Join Group
        </>
      )}
    </Button>
  )
}
[V0_FILE]typescriptreact:file="app/groups/create/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { CreateGroupForm } from "@/components/create-group-form"
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"

export default async function CreateGroupPage() {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

{/* Main Content */}
      <main className="container mx-auto px-4 py-8 max-w-2xl">
        <CreateGroupForm userId={user.id} />
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/create-group-form.tsx" isMerged="true"
"use client"

import type React from "react"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { createClient } from "@/lib/supabase/client"
import { useRouter } from "next/navigation"
import { useState } from "react"

export function CreateGroupForm({ userId }: { userId: string }) {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [formData, setFormData] = useState({
    name: "",
    description: "",
    sport_type: "",
    is_private: false,
    max_members: "",
  })

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

const supabase = createClient()

try {
      const { data, error } = await supabase
        .from("groups")
        .insert({
          leader_id: userId,
          name: formData.name,
          description: formData.description,
          sport_type: formData.sport_type,
          is_private: formData.is_private,
          max_members: formData.max_members ? Number.parseInt(formData.max_members) : null,
        })
        .select()
        .single()

if (error) throw error

// Add leader as first member
      await supabase.from("group_members").insert({
        group_id: data.id,
        user_id: userId,
        role: "leader",
      })

router.push(`/groups/${data.id}`)
    } catch (error) {
      console.error("[v0] Error creating group:", error)
      alert("Failed to create group. Please try again.")
    } finally {
      setLoading(false)
    }
  }

return (
    <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
      <CardHeader>
        <CardTitle>Group Details</CardTitle>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-6">
          <div>
            <Label htmlFor="name">Group Name *</Label>
            <Input
              id="name"
              required
              value={formData.name}
              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
              placeholder="Santiago Women Cyclists"
            />
          </div>

<div>
            <Label htmlFor="description">Description *</Label>
            <Textarea
              id="description"
              required
              value={formData.description}
              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
              placeholder="Describe your group and what makes it special..."
              rows={4}
            />
          </div>

<div>
            <Label htmlFor="sport_type">Sport Type *</Label>
            <Select
              value={formData.sport_type}
              onValueChange={(value) => setFormData({ ...formData, sport_type: value })}
            >
              <SelectTrigger>
                <SelectValue placeholder="Select sport" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="cycling">Cycling</SelectItem>
                <SelectItem value="mtb">Mountain Bike</SelectItem>
                <SelectItem value="trail_running">Trail Running</SelectItem>
                <SelectItem value="trekking">Trekking</SelectItem>
                <SelectItem value="running">Running</SelectItem>
              </SelectContent>
            </Select>
          </div>

<div>
            <Label htmlFor="max_members">Max Members</Label>
            <Input
              id="max_members"
              type="number"
              value={formData.max_members}
              onChange={(e) => setFormData({ ...formData, max_members: e.target.value })}
              placeholder="Leave empty for unlimited"
            />
          </div>

<div className="flex items-center space-x-2">
            <Checkbox
              id="is_private"
              checked={formData.is_private}
              onCheckedChange={(checked) => setFormData({ ...formData, is_private: checked as boolean })}
            />
            <Label htmlFor="is_private" className="text-sm font-normal cursor-pointer">
              Make this a private group (members need approval to join)
            </Label>
          </div>

<Button
            type="submit"
            disabled={loading}
            className="w-full h-12 bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700"
          >
            {loading ? "Creating Group..." : "Create Group"}
          </Button>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/profile/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Shield, Award, Calendar, Users, ArrowLeft, Edit } from "lucide-react"
import Link from "next/link"

export default async function ProfilePage() {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

// Get user profile
  const { data: profile } = await supabase.from("profiles").select("*").eq("id", user.id).single()

// Get user's events
  const { data: createdEvents } = await supabase
    .from("events")
    .select("*")
    .eq("creator_id", user.id)
    .order("event_date", { ascending: false })
    .limit(5)

const { data: joinedEvents } = await supabase
    .from("event_participants")
    .select(
      `
      *,
      event:events(*)
    `,
    )
    .eq("user_id", user.id)
    .order("joined_at", { ascending: false })
    .limit(5)

// Get user's groups
  const { data: groups } = await supabase
    .from("group_members")
    .select(
      `
      *,
      group:groups(*)
    `,
    )
    .eq("user_id", user.id)

{/* Main Content */}
      <main className="container mx-auto px-4 py-8 max-w-4xl">
        <div className="space-y-6">
          {/* Profile Header Card */}
          <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
            <CardContent className="pt-6">
              <div className="flex flex-col md:flex-row items-center md:items-start gap-6">
                <div className="w-24 h-24 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 flex items-center justify-center text-white font-bold text-3xl">
                  {(profile?.display_name || profile?.full_name || user.email || "U")[0].toUpperCase()}
                </div>
                <div className="flex-1 text-center md:text-left space-y-3">
                  <div>
                    <div className="flex items-center justify-center md:justify-start gap-2 mb-2">
                      <h2 className="text-2xl font-bold text-gray-800">
                        {profile?.display_name || profile?.full_name || "User"}
                      </h2>
                      {profile?.is_verified && (
                        <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
                          <Shield className="w-3 h-3 mr-1" />
                          Verified
                        </Badge>
                      )}
                    </div>
                    <p className="text-gray-600">{user.email}</p>
                    {profile?.city && (
                      <p className="text-sm text-gray-500">
                        {profile.city}, {profile.country}
                      </p>
                    )}
                  </div>
                  {profile?.bio && <p className="text-gray-700 leading-relaxed">{profile.bio}</p>}
                </div>
              </div>

{/* Stats Grid */}
              <div className="grid grid-cols-3 gap-4 mt-6 pt-6 border-t border-gray-100">
                <div className="text-center">
                  <div className="flex items-center justify-center gap-1 mb-1">
                    <Calendar className="w-4 h-4 text-purple-600" />
                    <span className="text-2xl font-bold text-purple-600">{profile?.total_events_attended || 0}</span>
                  </div>
                  <p className="text-sm text-gray-600">Events Joined</p>
                </div>
                <div className="text-center">
                  <div className="flex items-center justify-center gap-1 mb-1">
                    <Users className="w-4 h-4 text-pink-600" />
                    <span className="text-2xl font-bold text-pink-600">{profile?.total_events_created || 0}</span>
                  </div>
                  <p className="text-sm text-gray-600">Events Created</p>
                </div>
                <div className="text-center">
                  <div className="flex items-center justify-center gap-1 mb-1">
                    <Award className="w-4 h-4 text-teal-600" />
                    <span className="text-2xl font-bold text-teal-600">{profile?.reputation_score || 0}</span>
                  </div>
                  <p className="text-sm text-gray-600">Reputation</p>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Verification Status Card */}
          {!profile?.is_verified && (
            <Card className="border-0 bg-gradient-to-r from-blue-50 to-purple-50 shadow-lg">
              <CardContent className="pt-6">
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                    <Shield className="w-6 h-6 text-blue-600" />
                  </div>
                  <div className="flex-1">
                    <h3 className="font-semibold text-gray-800 mb-2">Get Verified</h3>
                    <p className="text-sm text-gray-600 mb-4">
                      Verify your identity to build trust with the community and unlock additional features.
                    </p>
                    <Button
                      className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700"
                      asChild
                    >
                      <Link href="/profile/verify">Start Verification</Link>
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          )}

{/* Preferred Sports */}
          {profile?.preferred_sports && profile.preferred_sports.length > 0 && (
            <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
              <CardHeader>
                <CardTitle>Preferred Sports</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex flex-wrap gap-2">
                  {profile.preferred_sports.map((sport) => (
                    <Badge key={sport} variant="outline" className="bg-purple-50 text-purple-700 border-purple-200">
                      {sport.replace("_", " ")}
                    </Badge>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}

{/* Groups */}
          {groups && groups.length > 0 && (
            <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
              <CardHeader>
                <CardTitle>My Groups ({groups.length})</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {groups.map((membership) => (
                    <Link
                      key={membership.id}
                      href={`/groups/${membership.group.id}`}
                      className="block p-3 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors"
                    >
                      <div className="flex items-center justify-between">
                        <div>
                          <p className="font-medium text-gray-800">{membership.group.name}</p>
                          <p className="text-sm text-gray-600">{membership.group.sport_type.replace("_", " ")}</p>
                        </div>
                        {membership.role === "leader" && (
                          <Badge variant="outline" className="bg-purple-50 text-purple-700 border-purple-200">
                            Leader
                          </Badge>
                        )}
                      </div>
                    </Link>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}

{/* Created Events */}
          {createdEvents && createdEvents.length > 0 && (
            <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
              <CardHeader>
                <CardTitle>Events I Created</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {createdEvents.map((event) => (
                    <Link
                      key={event.id}
                      href={`/events/${event.id}`}
                      className="block p-3 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors"
                    >
                      <p className="font-medium text-gray-800">{event.title}</p>
                      <p className="text-sm text-gray-600">
                        {new Date(event.event_date).toLocaleDateString()} at {event.event_time}
                      </p>
                    </Link>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}

{/* Joined Events */}
          {joinedEvents && joinedEvents.length > 0 && (
            <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
              <CardHeader>
                <CardTitle>Events I Joined</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {joinedEvents.map((participation) => (
                    <Link
                      key={participation.id}
                      href={`/events/${participation.event.id}`}
                      className="block p-3 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors"
                    >
                      <p className="font-medium text-gray-800">{participation.event.title}</p>
                      <p className="text-sm text-gray-600">
                        {new Date(participation.event.event_date).toLocaleDateString()} at{" "}
                        {participation.event.event_time}
                      </p>
                    </Link>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/profile/edit/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { EditProfileForm } from "@/components/edit-profile-form"
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"

export default async function EditProfilePage() {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

// Get user profile
  const { data: profile } = await supabase.from("profiles").select("*").eq("id", user.id).single()

{/* Main Content */}
      <main className="container mx-auto px-4 py-8 max-w-2xl">
        <EditProfileForm profile={profile} userId={user.id} />
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/edit-profile-form.tsx" isMerged="true"
"use client"

import type React from "react"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { createClient } from "@/lib/supabase/client"
import { useRouter } from "next/navigation"
import { useState } from "react"
import { Checkbox } from "@/components/ui/checkbox"

type Profile = {
  full_name: string | null
  display_name: string | null
  bio: string | null
  phone: string | null
  city: string | null
  country: string | null
  preferred_sports: string[] | null
}

const sportOptions = [
  { id: "cycling", label: "Cycling" },
  { id: "mtb", label: "Mountain Bike" },
  { id: "trail_running", label: "Trail Running" },
  { id: "trekking", label: "Trekking" },
  { id: "running", label: "Running" },
]

export function EditProfileForm({ profile, userId }: { profile: Profile | null; userId: string }) {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const [formData, setFormData] = useState({
    full_name: profile?.full_name || "",
    display_name: profile?.display_name || "",
    bio: profile?.bio || "",
    phone: profile?.phone || "",
    city: profile?.city || "",
    country: profile?.country || "Chile",
    preferred_sports: profile?.preferred_sports || [],
  })

const handleSportToggle = (sportId: string) => {
    setFormData((prev) => ({
      ...prev,
      preferred_sports: prev.preferred_sports.includes(sportId)
        ? prev.preferred_sports.filter((s) => s !== sportId)
        : [...prev.preferred_sports, sportId],
    }))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

const supabase = createClient()

try {
      const { error } = await supabase
        .from("profiles")
        .update({
          full_name: formData.full_name || null,
          display_name: formData.display_name || null,
          bio: formData.bio || null,
          phone: formData.phone || null,
          city: formData.city || null,
          country: formData.country || null,
          preferred_sports: formData.preferred_sports.length > 0 ? formData.preferred_sports : null,
        })
        .eq("id", userId)

if (error) throw error

router.push("/profile")
    } catch (error) {
      console.error("[v0] Error updating profile:", error)
      alert("Failed to update profile. Please try again.")
    } finally {
      setLoading(false)
    }
  }

return (
    <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
      <CardHeader>
        <CardTitle>Profile Information</CardTitle>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="grid md:grid-cols-2 gap-4">
            <div>
              <Label htmlFor="full_name">Full Name</Label>
              <Input
                id="full_name"
                value={formData.full_name}
                onChange={(e) => setFormData({ ...formData, full_name: e.target.value })}
                placeholder="Maria Silva"
              />
            </div>

<div>
              <Label htmlFor="display_name">Display Name</Label>
              <Input
                id="display_name"
                value={formData.display_name}
                onChange={(e) => setFormData({ ...formData, display_name: e.target.value })}
                placeholder="Maria S."
              />
            </div>
          </div>

<div>
            <Label htmlFor="bio">Bio</Label>
            <Textarea
              id="bio"
              value={formData.bio}
              onChange={(e) => setFormData({ ...formData, bio: e.target.value })}
              placeholder="Tell us about yourself and your sports interests..."
              rows={4}
            />
          </div>

<div className="grid md:grid-cols-2 gap-4">
            <div>
              <Label htmlFor="phone">Phone</Label>
              <Input
                id="phone"
                type="tel"
                value={formData.phone}
                onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                placeholder="+56 9 1234 5678"
              />
            </div>

<div>
              <Label htmlFor="city">City</Label>
              <Input
                id="city"
                value={formData.city}
                onChange={(e) => setFormData({ ...formData, city: e.target.value })}
                placeholder="Santiago"
              />
            </div>
          </div>

<div>
            <Label htmlFor="country">Country</Label>
            <Input
              id="country"
              value={formData.country}
              onChange={(e) => setFormData({ ...formData, country: e.target.value })}
              placeholder="Chile"
            />
          </div>

<div className="space-y-3">
            <Label>Preferred Sports</Label>
            <div className="space-y-2">
              {sportOptions.map((sport) => (
                <div key={sport.id} className="flex items-center space-x-2">
                  <Checkbox
                    id={sport.id}
                    checked={formData.preferred_sports.includes(sport.id)}
                    onCheckedChange={() => handleSportToggle(sport.id)}
                  />
                  <Label htmlFor={sport.id} className="text-sm font-normal cursor-pointer">
                    {sport.label}
                  </Label>
                </div>
              ))}
            </div>
          </div>

<Button
            type="submit"
            disabled={loading}
            className="w-full h-12 bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700"
          >
            {loading ? "Saving..." : "Save Changes"}
          </Button>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/profile/verify/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Shield, CheckCircle, ArrowLeft } from "lucide-react"
import Link from "next/link"

export default async function VerifyProfilePage() {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

// Get user profile
  const { data: profile } = await supabase.from("profiles").select("*").eq("id", user.id).single()

if (profile?.is_verified) {
    redirect("/profile")
  }

{/* Main Content */}
      <main className="container mx-auto px-4 py-8 max-w-3xl">
        <div className="space-y-6">
          {/* Info Card */}
          <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
            <CardHeader className="text-center">
              <div className="mx-auto w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center mb-4">
                <Shield className="w-8 h-8 text-white" />
              </div>
              <CardTitle className="text-2xl">Get Verified</CardTitle>
              <CardDescription className="text-base">
                Build trust with the SafeMove community by verifying your identity
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-4">
                <h3 className="font-semibold text-gray-800">Why verify your identity?</h3>
                <ul className="space-y-3">
                  <li className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                    <span className="text-gray-700">Build trust with other members of the community</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                    <span className="text-gray-700">Get a verified badge on your profile</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                    <span className="text-gray-700">Increase your reputation score</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                    <span className="text-gray-700">Access exclusive verified-only events</span>
                  </li>
                </ul>
              </div>

<div className="pt-4 border-t border-gray-100">
                <h3 className="font-semibold text-gray-800 mb-3">Verification Methods</h3>
                <p className="text-sm text-gray-600 mb-4">
                  Choose one of the following methods to verify your identity:
                </p>
                <div className="space-y-3">
                  <Card className="bg-gray-50 border-gray-200">
                    <CardContent className="p-4">
                      <h4 className="font-medium text-gray-800 mb-1">Government ID</h4>
                      <p className="text-sm text-gray-600 mb-3">
                        Upload a photo of your government-issued ID (passport, driver's license, or national ID)
                      </p>
                      <Button variant="outline" className="w-full bg-transparent" disabled>
                        Coming Soon
                      </Button>
                    </CardContent>
                  </Card>

<Card className="bg-gray-50 border-gray-200">
                    <CardContent className="p-4">
                      <h4 className="font-medium text-gray-800 mb-1">Social Media Verification</h4>
                      <p className="text-sm text-gray-600 mb-3">
                        Connect your verified social media account (Instagram, Facebook, or LinkedIn)
                      </p>
                      <Button variant="outline" className="w-full bg-transparent" disabled>
                        Coming Soon
                      </Button>
                    </CardContent>
                  </Card>

<Card className="bg-gray-50 border-gray-200">
                    <CardContent className="p-4">
                      <h4 className="font-medium text-gray-800 mb-1">Video Verification</h4>
                      <p className="text-sm text-gray-600 mb-3">
                        Complete a quick video verification call with our team
                      </p>
                      <Button variant="outline" className="w-full bg-transparent" disabled>
                        Coming Soon
                      </Button>
                    </CardContent>
                  </Card>
                </div>
              </div>

<div className="pt-4 border-t border-gray-100">
                <p className="text-xs text-gray-500 text-center">
                  Your personal information is encrypted and stored securely. We never share your verification details
                  with other users.
                </p>
              </div>
            </CardContent>
          </Card>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/notifications/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, Bell, Calendar, Users, AlertTriangle } from "lucide-react"
import Link from "next/link"

export default async function NotificationsPage() {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

// Fetch notifications
  const { data: notifications } = await supabase
    .from("notifications")
    .select("*")
    .eq("user_id", user.id)
    .order("created_at", { ascending: false })

const getIcon = (type: string) => {
    switch (type) {
      case "event_invite":
        return <Calendar className="w-5 h-5 text-purple-600" />
      case "event_reminder":
        return <Bell className="w-5 h-5 text-pink-600" />
      case "group_invite":
        return <Users className="w-5 h-5 text-teal-600" />
      case "safety_alert":
        return <AlertTriangle className="w-5 h-5 text-orange-600" />
      default:
        return <Bell className="w-5 h-5 text-gray-600" />
    }
  }

{/* Main Content */}
      <main className="container mx-auto px-4 py-8 max-w-3xl">
        {!notifications || notifications.length === 0 ? (
          <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
            <CardContent className="py-12 text-center">
              <Bell className="w-12 h-12 text-gray-400 mx-auto mb-4" />
              <p className="text-lg text-gray-600">No notifications yet</p>
              <p className="text-sm text-gray-500 mt-2">
                You'll see notifications here when you receive event invites, reminders, and updates
              </p>
            </CardContent>
          </Card>
        ) : (
          <div className="space-y-3">
            {notifications.map((notification) => (
              <Card
                key={notification.id}
                className={`border-0 shadow-sm transition-all hover:shadow-md ${
                  notification.is_read ? "bg-white/60" : "bg-white/90"
                } backdrop-blur`}
              >
                <CardContent className="p-4">
                  <div className="flex items-start gap-4">
                    <div className="flex-shrink-0">{getIcon(notification.type)}</div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-start justify-between gap-2 mb-1">
                        <h3 className="font-semibold text-gray-800">{notification.title}</h3>
                        {!notification.is_read && (
                          <Badge
                            variant="outline"
                            className="bg-purple-50 text-purple-700 border-purple-200 flex-shrink-0"
                          >
                            New
                          </Badge>
                        )}
                      </div>
                      <p className="text-sm text-gray-600 mb-2">{notification.message}</p>
                      <p className="text-xs text-gray-500">
                        {new Date(notification.created_at).toLocaleDateString()} at{" "}
                        {new Date(notification.created_at).toLocaleTimeString()}
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        )}
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/event-map.tsx" isMerged="true"
"use client"

import { useEffect, useRef } from "react"

type EventMapProps = {
  meetingPoint: string
  lat?: number
  lng?: number
}

export function EventMap({ meetingPoint, lat, lng }: EventMapProps) {
  const mapRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    // In a real implementation, this would use Mapbox or Google Maps
    // For now, we'll show a placeholder with the meeting point
    if (mapRef.current) {
      // Map initialization would go here
    }
  }, [lat, lng])

return (
    <div className="space-y-3">
      <div
        ref={mapRef}
        className="w-full h-64 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg flex items-center justify-center relative overflow-hidden"
      >
        <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAwIDEwIEwgNDAgMTAgTSAxMCAwIEwgMTAgNDAgTSAwIDIwIEwgNDAgMjAgTSAyMCAwIEwgMjAgNDAgTSAwIDMwIEwgNDAgMzAgTSAzMCAwIEwgMzAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2UwZTBlMCIgb3BhY2l0eT0iMC41IiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4=')] opacity-30" />
        <div className="relative z-10 text-center p-6">
          <div className="w-12 h-12 bg-gradient-to-r from-pink-500 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-3">
            <svg
              className="w-6 h-6 text-white"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
              />
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
          </div>
          <p className="text-sm font-medium text-gray-700">Meeting Point</p>
          <p className="text-xs text-gray-500 mt-1">{meetingPoint}</p>
          <p className="text-xs text-gray-400 mt-2">Map integration coming soon</p>
        </div>
      </div>
      <a
        href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(meetingPoint)}`}
        target="_blank"
        rel="noopener noreferrer"
        className="block text-center text-sm text-purple-600 hover:text-purple-700 underline"
      >
        Open in Google Maps
      </a>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/safety/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ArrowLeft, Shield, AlertTriangle, Phone, Users, MapPin, CheckCircle } from "lucide-react"
import Link from "next/link"

export default async function SafetyPage() {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

{/* Main Content */}
      <main className="container mx-auto px-4 py-8 max-w-4xl">
        <div className="space-y-6">
          {/* Emergency Contact Card */}
          <Card className="border-0 bg-gradient-to-r from-red-50 to-orange-50 shadow-lg">
            <CardContent className="pt-6">
              <div className="flex items-start gap-4">
                <div className="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0">
                  <Phone className="w-6 h-6 text-red-600" />
                </div>
                <div className="flex-1">
                  <h3 className="font-semibold text-gray-800 mb-2">Emergency Contacts</h3>
                  <div className="space-y-2 text-sm">
                    <p className="text-gray-700">
                      <strong>Emergency Services (Chile):</strong> 133 (Police), 131 (Ambulance), 132 (Fire)
                    </p>
                    <p className="text-gray-700">
                      <strong>SafeMove Support:</strong> +56 9 XXXX XXXX (24/7)
                    </p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Safety Tips */}
          <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
            <CardHeader>
              <div className="flex items-center gap-2">
                <Shield className="w-6 h-6 text-purple-600" />
                <CardTitle>Safety Tips for Group Activities</CardTitle>
              </div>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-3">
                <div className="flex items-start gap-3">
                  <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <h4 className="font-medium text-gray-800">Always inform someone</h4>
                    <p className="text-sm text-gray-600">
                      Let a friend or family member know where you're going and when you expect to return
                    </p>
                  </div>
                </div>

<div className="flex items-start gap-3">
                  <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <h4 className="font-medium text-gray-800">Meet in public places</h4>
                    <p className="text-sm text-gray-600">
                      Always choose well-known, public meeting points for the start of your activities
                    </p>
                  </div>
                </div>

<div className="flex items-start gap-3">
                  <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <h4 className="font-medium text-gray-800">Check participant profiles</h4>
                    <p className="text-sm text-gray-600">
                      Review the profiles and reputation scores of other participants before joining
                    </p>
                  </div>
                </div>

<div className="flex items-start gap-3">
                  <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <h4 className="font-medium text-gray-800">Bring essential equipment</h4>
                    <p className="text-sm text-gray-600">
                      Always carry water, phone, ID, and any sport-specific safety gear
                    </p>
                  </div>
                </div>

<div className="flex items-start gap-3">
                  <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <h4 className="font-medium text-gray-800">Stay with the group</h4>
                    <p className="text-sm text-gray-600">
                      Don't separate from the group, especially in unfamiliar areas
                    </p>
                  </div>
                </div>

<div className="flex items-start gap-3">
                  <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <h4 className="font-medium text-gray-800">Trust your instincts</h4>
                    <p className="text-sm text-gray-600">
                      If something doesn't feel right, it's okay to leave or not participate
                    </p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Verification Importance */}
          <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
            <CardHeader>
              <div className="flex items-center gap-2">
                <Users className="w-6 h-6 text-teal-600" />
                <CardTitle>Why Verification Matters</CardTitle>
              </div>
            </CardHeader>
            <CardContent className="space-y-3">
              <p className="text-gray-700">
                SafeMove uses identity verification to create a trusted community. Verified members have completed one
                of our verification processes, which helps ensure everyone's safety.
              </p>
              <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                <p className="text-sm text-blue-800">
                  <strong>Look for the verified badge</strong> when joining events. Verified members have proven their
                  identity and are more trustworthy.
                </p>
              </div>
            </CardContent>
          </Card>

{/* Route Safety */}
          <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
            <CardHeader>
              <div className="flex items-center gap-2">
                <MapPin className="w-6 h-6 text-orange-600" />
                <CardTitle>Route Safety Checklist</CardTitle>
              </div>
            </CardHeader>
            <CardContent className="space-y-3">
              <ul className="space-y-2 text-sm text-gray-700">
                <li className="flex items-start gap-2">
                  <span className="text-orange-600 font-bold">•</span>
                  <span>Review the route description and difficulty level before joining</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-orange-600 font-bold">•</span>
                  <span>Check weather conditions for the day of the event</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-orange-600 font-bold">•</span>
                  <span>Ensure you have the required equipment listed by the organizer</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-orange-600 font-bold">•</span>
                  <span>Know your physical limits and choose appropriate difficulty levels</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-orange-600 font-bold">•</span>
                  <span>Carry a fully charged phone with emergency contacts saved</span>
                </li>
              </ul>
            </CardContent>
          </Card>

{/* Report Issues */}
          <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
            <CardHeader>
              <div className="flex items-center gap-2">
                <AlertTriangle className="w-6 h-6 text-red-600" />
                <CardTitle>Report Safety Concerns</CardTitle>
              </div>
            </CardHeader>
            <CardContent className="space-y-3">
              <p className="text-gray-700">
                If you experience or witness any safety concerns, inappropriate behavior, or suspicious activity, please
                report it immediately.
              </p>
              <Button className="w-full bg-gradient-to-r from-red-500 to-orange-600 hover:from-red-600 hover:to-orange-700">
                Report an Issue
              </Button>
              <p className="text-xs text-gray-500 text-center">
                All reports are confidential and reviewed by our safety team
              </p>
            </CardContent>
          </Card>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/events/[id]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { redirect, notFound } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Calendar, MapPin, Users, TrendingUp, Clock, Shield, AlertTriangle, ArrowLeft, Mountain } from "lucide-react"
import Link from "next/link"
import { format } from "date-fns"
import { JoinEventButton } from "@/components/join-event-button"
import { EventMap } from "@/components/event-map"

export default async function EventDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const supabase = await createClient()
  const { id } = await params

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

// Fetch event details
  const { data: event, error } = await supabase
    .from("events")
    .select(
      `
      *,
      creator:profiles!events_creator_id_fkey(id, full_name, display_name, is_verified, reputation_score, profile_image_url)
    `,
    )
    .eq("id", id)
    .single()

if (error || !event) {
    notFound()
  }

// Check if user is already participating
  const { data: participation } = await supabase
    .from("event_participants")
    .select("*")
    .eq("event_id", id)
    .eq("user_id", user.id)
    .single()

const isParticipating = !!participation
  const isCreator = event.creator_id === user.id

// Fetch participants
  const { data: participants } = await supabase
    .from("event_participants")
    .select(
      `
      *,
      user:profiles!event_participants_user_id_fkey(id, full_name, display_name, is_verified, reputation_score, profile_image_url)
    `,
    )
    .eq("event_id", id)

const difficultyColors: Record<string, string> = {
    beginner: "bg-green-100 text-green-700 border-green-200",
    intermediate: "bg-yellow-100 text-yellow-700 border-yellow-200",
    advanced: "bg-red-100 text-red-700 border-red-200",
  }

{/* Main Content */}
      <main className="container mx-auto px-4 py-8 max-w-4xl">
        <div className="space-y-6">
          {/* Event Header Card */}
          <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
            <CardHeader className="space-y-4">
              <div className="flex items-start justify-between gap-4">
                <div className="flex-1">
                  <h2 className="text-3xl font-bold text-gray-800 mb-3">{event.title}</h2>
                  <div className="flex items-center gap-2 flex-wrap">
                    <Badge variant="outline" className={difficultyColors[event.difficulty_level]}>
                      {event.difficulty_level}
                    </Badge>
                    <Badge variant="outline" className="bg-purple-50 text-purple-700 border-purple-200">
                      {event.sport_type.replace("_", " ")}
                    </Badge>
                    {event.creator.is_verified && (
                      <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
                        <Shield className="w-3 h-3 mr-1" />
                        Verified Host
                      </Badge>
                    )}
                  </div>
                </div>
              </div>

<p className="text-gray-700 leading-relaxed">{event.description}</p>
            </CardHeader>

<CardContent className="space-y-6">
              {/* Event Details Grid */}
              <div className="grid md:grid-cols-2 gap-4">
                <div className="flex items-start gap-3">
                  <div className="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center flex-shrink-0">
                    <Calendar className="w-5 h-5 text-pink-600" />
                  </div>
                  <div>
                    <p className="text-sm text-gray-500">Date & Time</p>
                    <p className="font-semibold text-gray-800">
                      {format(new Date(event.event_date), "EEEE, MMMM d, yyyy")}
                    </p>
                    <p className="text-sm text-gray-600">{event.event_time}</p>
                  </div>
                </div>

<div className="flex items-start gap-3">
                  <div className="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0">
                    <MapPin className="w-5 h-5 text-purple-600" />
                  </div>
                  <div>
                    <p className="text-sm text-gray-500">Meeting Point</p>
                    <p className="font-semibold text-gray-800">{event.meeting_point}</p>
                  </div>
                </div>

<div className="flex items-start gap-3">
                  <div className="w-10 h-10 rounded-full bg-teal-100 flex items-center justify-center flex-shrink-0">
                    <Users className="w-5 h-5 text-teal-600" />
                  </div>
                  <div>
                    <p className="text-sm text-gray-500">Participants</p>
                    <p className="font-semibold text-gray-800">
                      {event.current_participants}/{event.max_participants || "Unlimited"}
                    </p>
                  </div>
                </div>

{event.distance_km && (
                  <div className="flex items-start gap-3">
                    <div className="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center flex-shrink-0">
                      <TrendingUp className="w-5 h-5 text-orange-600" />
                    </div>
                    <div>
                      <p className="text-sm text-gray-500">Distance</p>
                      <p className="font-semibold text-gray-800">{event.distance_km} km</p>
                    </div>
                  </div>
                )}

{event.estimated_duration_minutes && (
                  <div className="flex items-start gap-3">
                    <div className="w-10 h-10 rounded-full bg-rose-100 flex items-center justify-center flex-shrink-0">
                      <Clock className="w-5 h-5 text-rose-600" />
                    </div>
                    <div>
                      <p className="text-sm text-gray-500">Duration</p>
                      <p className="font-semibold text-gray-800">
                        {Math.floor(event.estimated_duration_minutes / 60)}h {event.estimated_duration_minutes % 60}m
                      </p>
                    </div>
                  </div>
                )}

{event.elevation_gain_m && (
                  <div className="flex items-start gap-3">
                    <div className="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center flex-shrink-0">
                      <Mountain className="w-5 h-5 text-indigo-600" />
                    </div>
                    <div>
                      <p className="text-sm text-gray-500">Elevation Gain</p>
                      <p className="font-semibold text-gray-800">{event.elevation_gain_m}m</p>
                    </div>
                  </div>
                )}
              </div>

<div className="pt-4 border-t border-gray-100">
                <h3 className="font-semibold text-gray-800 mb-3">Location</h3>
                <EventMap
                  meetingPoint={event.meeting_point}
                  lat={event.meeting_point_lat}
                  lng={event.meeting_point_lng}
                />
              </div>

{/* Route Description */}
              {event.route_description && (
                <div className="pt-4 border-t border-gray-100">
                  <h3 className="font-semibold text-gray-800 mb-2">Route Description</h3>
                  <p className="text-gray-600 leading-relaxed">{event.route_description}</p>
                </div>
              )}

{/* Safety Information */}
              {(event.safety_notes || event.required_equipment) && (
                <div className="pt-4 border-t border-gray-100">
                  <div className="flex items-center gap-2 mb-3">
                    <AlertTriangle className="w-5 h-5 text-orange-600" />
                    <h3 className="font-semibold text-gray-800">Safety Information</h3>
                  </div>
                  {event.safety_notes && <p className="text-gray-600 mb-2">{event.safety_notes}</p>}
                  {event.required_equipment && event.required_equipment.length > 0 && (
                    <div>
                      <p className="text-sm font-medium text-gray-700 mb-1">Required Equipment:</p>
                      <ul className="list-disc list-inside text-sm text-gray-600 space-y-1">
                        {event.required_equipment.map((item, index) => (
                          <li key={index}>{item}</li>
                        ))}
                      </ul>
                    </div>
                  )}
                  <div className="mt-3">
                    <Link
                      href="/safety"
                      className="text-sm text-purple-600 hover:text-purple-700 underline inline-flex items-center gap-1"
                    >
                      <Shield className="w-4 h-4" />
                      View Safety Guidelines
                    </Link>
                  </div>
                </div>
              )}

{/* Join Button */}
              {!isCreator && (
                <div className="pt-4">
                  <JoinEventButton eventId={event.id} isParticipating={isParticipating} />
                </div>
              )}

{isCreator && (
                <div className="pt-4">
                  <Badge variant="outline" className="bg-purple-50 text-purple-700 border-purple-200">
                    You are the organizer of this event
                  </Badge>
                </div>
              )}
            </CardContent>
          </Card>

{/* Organizer Card */}
          <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
            <CardHeader>
              <CardTitle>Organized by</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 flex items-center justify-center text-white font-semibold text-lg">
                  {(event.creator.display_name || event.creator.full_name || "U")[0].toUpperCase()}
                </div>
                <div className="flex-1">
                  <div className="flex items-center gap-2">
                    <p className="font-semibold text-gray-800">
                      {event.creator.display_name || event.creator.full_name}
                    </p>
                    {event.creator.is_verified && <Shield className="w-4 h-4 text-blue-600" />}
                  </div>
                  <p className="text-sm text-gray-600">Reputation: {event.creator.reputation_score} points</p>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Participants Card */}
          {participants && participants.length > 0 && (
            <Card className="border-0 bg-white/80 backdrop-blur shadow-lg">
              <CardHeader>
                <CardTitle>Participants ({participants.length})</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {participants.map((participant) => (
                    <div key={participant.id} className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-full bg-gradient-to-r from-teal-400 to-teal-600 flex items-center justify-center text-white font-semibold">
                        {(participant.user.display_name || participant.user.full_name || "U")[0].toUpperCase()}
                      </div>
                      <div className="flex-1">
                        <div className="flex items-center gap-2">
                          <p className="font-medium text-gray-800">
                            {participant.user.display_name || participant.user.full_name}
                          </p>
                          {participant.user.is_verified && <Shield className="w-3 h-3 text-blue-600" />}
                        </div>
                        <p className="text-xs text-gray-500">Reputation: {participant.user.reputation_score} points</p>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/home/page.tsx" isEdit="true" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { SportSelector } from "@/components/sport-selector"
import { Button } from "@/components/ui/button"
import { Bell, User, LogOut, Users, Shield } from "lucide-react"
import Link from "next/link"

export default async function HomePage() {
  const supabase = await createClient()

const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

// Get user profile
  const { data: profile } = await supabase.from("profiles").select("*").eq("id", user.id).single()

// If profile doesn't exist, create one
  if (!profile) {
    await supabase.from("profiles").insert({
      id: user.id,
      email: user.email!,
      full_name: user.user_metadata?.full_name || null,
    })
  }

const handleSignOut = async () => {
    "use server"
    const supabase = await createClient()
    await supabase.auth.signOut()
    redirect("/")
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-pink-50 via-purple-50 to-teal-50">
      {/* Header */}
      <header className="bg-white/80 backdrop-blur border-b border-purple-100 sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <h1 className="text-2xl font-bold bg-gradient-to-r from-pink-500 to-purple-600 bg-clip-text text-transparent">
              SafeMove
            </h1>
            <div className="flex items-center gap-3">
              <Button variant="ghost" size="icon" asChild>
                <Link href="/safety">
                  <Shield className="w-5 h-5" />
                  <span className="sr-only">Safety</span>
                </Link>
              </Button>
              <Button variant="ghost" size="icon" asChild>
                <Link href="/groups">
                  <Users className="w-5 h-5" />
                  <span className="sr-only">Groups</span>
                </Link>
              </Button>
              <Button variant="ghost" size="icon" className="relative" asChild>
                <Link href="/notifications">
                  <Bell className="w-5 h-5" />
                  <span className="sr-only">Notifications</span>
                </Link>
              </Button>
              <Button variant="ghost" size="icon" asChild>
                <Link href="/profile">
                  <User className="w-5 h-5" />
                  <span className="sr-only">Profile</span>
                </Link>
              </Button>
              <form action={handleSignOut}>
                <Button variant="ghost" size="icon" type="submit">
                  <LogOut className="w-5 h-5" />
                  <span className="sr-only">Sign out</span>
                </Button>
              </form>
            </div>
          </div>
        </div>
      </header>

{/* Main Content */}
      <main className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto space-y-8">
          {/* Welcome Section */}
          <div className="text-center space-y-3">
            <h2 className="text-3xl font-bold text-gray-800">
              Welcome back, {profile?.full_name || user.email?.split("@")[0]}!
            </h2>
            <p className="text-lg text-gray-600">What sport are you interested in today?</p>
          </div>

{/* Sport Selector */}
          <SportSelector />

{/* Quick Stats */}
          <div className="grid grid-cols-3 gap-4">
            <div className="bg-white/80 backdrop-blur rounded-xl p-4 text-center shadow-sm">
              <div className="text-2xl font-bold text-purple-600">{profile?.total_events_attended || 0}</div>
              <div className="text-sm text-gray-600">Events Joined</div>
            </div>
            <div className="bg-white/80 backdrop-blur rounded-xl p-4 text-center shadow-sm">
              <div className="text-2xl font-bold text-pink-600">{profile?.total_events_created || 0}</div>
              <div className="text-sm text-gray-600">Events Created</div>
            </div>
            <div className="bg-white/80 backdrop-blur rounded-xl p-4 text-center shadow-sm">
              <div className="text-2xl font-bold text-teal-600">{profile?.reputation_score || 0}</div>
              <div className="text-sm text-gray-600">Reputation</div>
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescript:file="lib/supabase/server.ts" isEdit="true" isMerged="true"
import { createServerClient } from "@supabase/ssr"
import { cookies } from "next/headers"

export async function createClient() {
  const cookieStore = await cookies()

return createServerClient(
    process.env.SUPABASE_SUPABASE_NEXT_PUBLIC_SUPABASE_URL!,
    process.env.SUPABASE_NEXT_PUBLIC_SUPABASE_ANON_KEY_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll()
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options))
          } catch {
            // The "setAll" method was called from a Server Component.
            // This can be ignored if you have middleware refreshing
            // user sessions.
          }
        },
      },
    },
  )
}
[V0_FILE]typescriptreact:file="app/diagnostics/page.tsx" isEdit="true" isMerged="true"
import { createClient } from "@/lib/supabase/server"

export default async function DiagnosticsPage() {
  let connectionStatus = "Unknown"
  let errorMessage = ""
  const envVarsStatus = {
    serverUrl: !!process.env.SUPABASE_SUPABASE_NEXT_PUBLIC_SUPABASE_URL,
    serverKey: !!process.env.SUPABASE_NEXT_PUBLIC_SUPABASE_ANON_KEY_ANON_KEY,
    clientUrl: !!process.env.NEXT_PUBLIC_SUPABASE_URL,
    clientKey: !!process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
  }

try {
    const supabase = await createClient()
    const { data, error } = await supabase.from("profiles").select("count").limit(1)

if (error) {
      connectionStatus = "Error"
      errorMessage = error.message
    } else {
      connectionStatus = "Connected"
    }
  } catch (error) {
    connectionStatus = "Failed"
    errorMessage = error instanceof Error ? error.message : "Unknown error"
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-pink-50 via-purple-50 to-teal-50 p-8">
      <div className="mx-auto max-w-2xl">
        <h1 className="mb-8 text-3xl font-bold text-gray-900">Diagnóstico de Supabase</h1>

<div className="space-y-4">
          <div className="rounded-lg bg-white p-6 shadow-md">
            <h2 className="mb-4 text-xl font-semibold text-gray-800">Estado de Conexión</h2>
            <div className="flex items-center gap-3">
              <div
                className={`h-4 w-4 rounded-full ${
                  connectionStatus === "Connected"
                    ? "bg-green-500"
                    : connectionStatus === "Error" || connectionStatus === "Failed"
                      ? "bg-red-500"
                      : "bg-yellow-500"
                }`}
              />
              <span className="text-lg font-medium">{connectionStatus}</span>
            </div>
            {errorMessage && <p className="mt-3 text-sm text-red-600">Error: {errorMessage}</p>}
          </div>

<div className="rounded-lg bg-white p-6 shadow-md">
            <h2 className="mb-4 text-xl font-semibold text-gray-800">Variables de Entorno (Servidor)</h2>
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <span className="text-gray-700">SUPABASE_NEXT_PUBLIC_SUPABASE_URL</span>
                <span className={`font-medium ${envVarsStatus.serverUrl ? "text-green-600" : "text-red-600"}`}>
                  {envVarsStatus.serverUrl ? "✓ Configurada" : "✗ Falta"}
                </span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-gray-700">SUPABASE_NEXT_PUBLIC_SUPABASE_ANON_KEY</span>
                <span className={`font-medium ${envVarsStatus.serverKey ? "text-green-600" : "text-red-600"}`}>
                  {envVarsStatus.serverKey ? "✓ Configurada" : "✗ Falta"}
                </span>
              </div>
            </div>
          </div>

<div className="rounded-lg bg-white p-6 shadow-md">
            <h2 className="mb-4 text-xl font-semibold text-gray-800">Variables de Entorno (Cliente)</h2>
            <p className="mb-3 text-sm text-gray-600">
              Estas variables son necesarias para autenticación en el navegador
            </p>
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <span className="text-gray-700">NEXT_PUBLIC_SUPABASE_URL</span>
                <span className={`font-medium ${envVarsStatus.clientUrl ? "text-green-600" : "text-red-600"}`}>
                  {envVarsStatus.clientUrl ? "✓ Configurada" : "✗ Falta"}
                </span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-gray-700">NEXT_PUBLIC_SUPABASE_ANON_KEY</span>
                <span className={`font-medium ${envVarsStatus.clientKey ? "text-green-600" : "text-red-600"}`}>
                  {envVarsStatus.clientKey ? "✓ Falta" : "✗ Falta"}
                </span>
              </div>
            </div>
            {(!envVarsStatus.clientUrl || !envVarsStatus.clientKey) && (
              <div className="mt-4 rounded-md bg-yellow-50 p-3 text-sm text-yellow-800">
                <p className="font-semibold">Acción requerida:</p>
                <p className="mt-1">
                  Agrega estas variables en la sección "Vars" del sidebar con los mismos valores de las variables del
                  servidor (sin el prefijo SUPABASE_)
                </p>
              </div>
            )}
          </div>

<div className="rounded-lg bg-white p-6 shadow-md">
            <h2 className="mb-4 text-xl font-semibold text-gray-800">Valores de Variables (parcial)</h2>
            <div className="space-y-2 text-sm">
              <div>
                <span className="font-medium text-gray-700">URL: </span>
                <span className="font-mono text-gray-600">
                  {process.env.SUPABASE_NEXT_PUBLIC_SUPABASE_URL?.substring(0, 30)}...
                </span>
              </div>
              <div>
                <span className="font-medium text-gray-700">Key: </span>
                <span className="font-mono text-gray-600">
                  {process.env.SUPABASE_NEXT_PUBLIC_SUPABASE_ANON_KEY?.substring(0, 20)}...
                </span>
              </div>
            </div>
          </div>
        </div>

<div className="mt-8">
          <a
            href="/"
            className="inline-block rounded-lg bg-gradient-to-r from-pink-500 to-purple-500 px-6 py-3 font-semibold text-white shadow-md transition-all hover:shadow-lg"
          >
            Volver al Inicio
          </a>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/supabase/client.ts" isEdit="true" isMerged="true"
import { createBrowserClient } from "@supabase/ssr"

export function createClient() {
  console.log("[v0] Supabase URL:", process.env.NEXT_PUBLIC_SUPABASE_URL)
  console.log("[v0] Supabase Key exists:", !!process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY)

return createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!)
}
[V0_FILE]sql:file="scripts/002_add_profile_completion.sql" isMerged="true"
-- Add profile completion fields to profiles table
alter table public.profiles
add column if not exists profile_completed boolean default false,
add column if not exists emergency_contact_name text,
add column if not exists emergency_contact_phone text,
add column if not exists address text,
add column if not exists identity_verified boolean default false,
add column if not exists identity_verification_provider text,
add column if not exists identity_verification_id text,
add column if not exists identity_verification_date timestamptz;

-- Create index for profile completion checks
create index if not exists idx_profiles_completed on public.profiles(id, profile_completed);
[V0_FILE]typescript:file="lib/supabase/middleware.ts" isEdit="true" isMerged="true"
import { createServerClient } from "@supabase/ssr"
import { NextResponse, type NextRequest } from "next/server"

export async function updateSession(request: NextRequest) {
  let supabaseResponse = NextResponse.next({
    request,
  })

const supabase = createServerClient(
    process.env.SUPABASE_NEXT_PUBLIC_SUPABASE_URL!,
    process.env.SUPABASE_NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll()
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value))
          supabaseResponse = NextResponse.next({
            request,
          })
          cookiesToSet.forEach(({ name, value, options }) => supabaseResponse.cookies.set(name, value, options))
        },
      },
    },
  )

const {
    data: { user },
  } = await supabase.auth.getUser()

const publicRoutes = [
    "/",
    "/auth/login",
    "/auth/sign-up",
    "/auth/sign-up-success",
    "/auth/verify-email",
    "/diagnostics",
  ]
  const isPublicRoute = publicRoutes.some((route) => request.nextUrl.pathname.startsWith(route))

// Redirect unauthenticated users to login (except for public routes)
  if (!user && !isPublicRoute) {
    const url = request.nextUrl.clone()
    url.pathname = "/auth/login"
    return NextResponse.redirect(url)
  }

if (user && !user.email_confirmed_at && !isPublicRoute && !request.nextUrl.pathname.startsWith("/complete-profile")) {
    const url = request.nextUrl.clone()
    url.pathname = "/auth/verify-email"
    return NextResponse.redirect(url)
  }

if (user && user.email_confirmed_at && !request.nextUrl.pathname.startsWith("/complete-profile") && !isPublicRoute) {
    const { data: profile } = await supabase.from("profiles").select("profile_completed").eq("id", user.id).single()

// Redirect to profile completion if not completed
    if (profile && !profile.profile_completed) {
      const url = request.nextUrl.clone()
      url.pathname = "/complete-profile"
      return NextResponse.redirect(url)
    }
  }

return supabaseResponse
}
[V0_FILE]typescriptreact:file="app/complete-profile/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef } from "react"
import { useRouter } from "next/navigation"
import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Camera, Upload, Shield, AlertCircle } from "lucide-react"
import { Alert, AlertDescription } from "@/components/ui/alert"

export default function CompleteProfilePage() {
  const router = useRouter()
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [showCamera, setShowCamera] = useState(false)
  const [photoPreview, setPhotoPreview] = useState<string | null>(null)
  const [photoFile, setPhotoFile] = useState<File | null>(null)
  const videoRef = useRef<HTMLVideoElement>(null)
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const fileInputRef = useRef<HTMLInputElement>(null)

const [formData, setFormData] = useState({
    phone: "",
    address: "",
    dateOfBirth: "",
    emergencyContactName: "",
    emergencyContactPhone: "",
  })

const startCamera = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" } })
      if (videoRef.current) {
        videoRef.current.srcObject = stream
        setShowCamera(true)
      }
    } catch (err) {
      setError("No se pudo acceder a la cámara. Por favor, sube una foto desde archivo.")
    }
  }

const capturePhoto = () => {
    if (videoRef.current && canvasRef.current) {
      const video = videoRef.current
      const canvas = canvasRef.current
      canvas.width = video.videoWidth
      canvas.height = video.videoHeight
      const ctx = canvas.getContext("2d")
      if (ctx) {
        ctx.drawImage(video, 0, 0)
        canvas.toBlob((blob) => {
          if (blob) {
            const file = new File([blob], "profile-photo.jpg", { type: "image/jpeg" })
            setPhotoFile(file)
            setPhotoPreview(canvas.toDataURL())
            stopCamera()
          }
        }, "image/jpeg")
      }
    }
  }

const stopCamera = () => {
    if (videoRef.current && videoRef.current.srcObject) {
      const stream = videoRef.current.srcObject as MediaStream
      stream.getTracks().forEach((track) => track.stop())
      setShowCamera(false)
    }
  }

const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      setPhotoFile(file)
      const reader = new FileReader()
      reader.onloadend = () => {
        setPhotoPreview(reader.result as string)
      }
      reader.readAsDataURL(file)
    }
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    setError(null)

if (!photoFile) {
      setError("La foto de perfil es obligatoria")
      setIsLoading(false)
      return
    }

try {
      const supabase = createClient()
      const {
        data: { user },
      } = await supabase.auth.getUser()

if (!user) throw new Error("No user found")

// Upload photo to Vercel Blob (placeholder - you'll need to implement this)
      // For now, we'll use a placeholder URL
      const photoUrl = photoPreview // In production, upload to Vercel Blob

// Update profile
      const { error: updateError } = await supabase
        .from("profiles")
        .update({
          phone: formData.phone,
          address: formData.address,
          date_of_birth: formData.dateOfBirth,
          emergency_contact_name: formData.emergencyContactName,
          emergency_contact_phone: formData.emergencyContactPhone,
          profile_image_url: photoUrl,
          profile_completed: true,
        })
        .eq("id", user.id)

if (updateError) throw updateError

router.push("/home")
    } catch (err) {
      setError(err instanceof Error ? err.message : "Error al completar el perfil")
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-pink-50 via-purple-50 to-teal-50 p-6">
      <div className="mx-auto max-w-2xl">
        <Card className="shadow-xl border-0">
          <CardHeader className="space-y-2 text-center">
            <div className="mx-auto w-16 h-16 bg-gradient-to-r from-pink-500 to-purple-600 rounded-full flex items-center justify-center mb-4">
              <Shield className="w-8 h-8 text-white" />
            </div>
            <CardTitle className="text-3xl font-bold bg-gradient-to-r from-pink-500 to-purple-600 bg-clip-text text-transparent">
              Completa tu Perfil
            </CardTitle>
            <CardDescription className="text-base">
              Por seguridad, necesitamos verificar tu identidad antes de continuar
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Alert className="mb-6 border-purple-200 bg-purple-50">
              <AlertCircle className="h-4 w-4 text-purple-600" />
              <AlertDescription className="text-purple-900">
                Todos los campos son obligatorios. Tu información está protegida y solo será visible para ti y en caso
                de emergencia.
              </AlertDescription>
            </Alert>

<form onSubmit={handleSubmit} className="space-y-6">
              {/* Photo Section */}
              <div className="space-y-4">
                <Label className="text-base font-semibold">Foto de Perfil *</Label>
                <div className="flex flex-col items-center gap-4">
                  {photoPreview ? (
                    <div className="relative">
                      <img
                        src={photoPreview || "/placeholder.svg"}
                        alt="Preview"
                        className="w-32 h-32 rounded-full object-cover border-4 border-purple-200"
                      />
                      <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        className="mt-2 bg-transparent"
                        onClick={() => {
                          setPhotoPreview(null)
                          setPhotoFile(null)
                        }}
                      >
                        Cambiar foto
                      </Button>
                    </div>
                  ) : (
                    <div className="flex gap-3">
                      <Button
                        type="button"
                        variant="outline"
                        className="gap-2 bg-transparent"
                        onClick={startCamera}
                        disabled={showCamera}
                      >
                        <Camera className="w-4 h-4" />
                        Tomar Foto
                      </Button>
                      <Button
                        type="button"
                        variant="outline"
                        className="gap-2 bg-transparent"
                        onClick={() => fileInputRef.current?.click()}
                      >
                        <Upload className="w-4 h-4" />
                        Subir Archivo
                      </Button>
                      <input
                        ref={fileInputRef}
                        type="file"
                        accept="image/*"
                        className="hidden"
                        onChange={handleFileUpload}
                      />
                    </div>
                  )}

{showCamera && (
                    <div className="space-y-3">
                      <video
                        ref={videoRef}
                        autoPlay
                        className="w-full max-w-md rounded-lg border-2 border-purple-200"
                      />
                      <canvas ref={canvasRef} className="hidden" />
                      <div className="flex gap-2">
                        <Button type="button" onClick={capturePhoto} className="flex-1">
                          Capturar
                        </Button>
                        <Button type="button" variant="outline" onClick={stopCamera} className="flex-1 bg-transparent">
                          Cancelar
                        </Button>
                      </div>
                    </div>
                  )}
                </div>
              </div>

{/* Personal Information */}
              <div className="grid gap-4">
                <div className="grid gap-2">
                  <Label htmlFor="phone">Teléfono *</Label>
                  <Input
                    id="phone"
                    type="tel"
                    placeholder="+56 9 1234 5678"
                    required
                    value={formData.phone}
                    onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                  />
                </div>

<div className="grid gap-2">
                  <Label htmlFor="address">Dirección *</Label>
                  <Textarea
                    id="address"
                    placeholder="Calle, número, comuna, ciudad"
                    required
                    value={formData.address}
                    onChange={(e) => setFormData({ ...formData, address: e.target.value })}
                    rows={3}
                  />
                </div>

<div className="grid gap-2">
                  <Label htmlFor="dateOfBirth">Fecha de Nacimiento *</Label>
                  <Input
                    id="dateOfBirth"
                    type="date"
                    required
                    value={formData.dateOfBirth}
                    onChange={(e) => setFormData({ ...formData, dateOfBirth: e.target.value })}
                  />
                </div>
              </div>

{/* Emergency Contact */}
              <div className="space-y-4 pt-4 border-t">
                <h3 className="font-semibold text-lg">Contacto de Emergencia</h3>
                <div className="grid gap-4">
                  <div className="grid gap-2">
                    <Label htmlFor="emergencyName">Nombre Completo *</Label>
                    <Input
                      id="emergencyName"
                      type="text"
                      placeholder="Nombre del contacto de emergencia"
                      required
                      value={formData.emergencyContactName}
                      onChange={(e) => setFormData({ ...formData, emergencyContactName: e.target.value })}
                    />
                  </div>

<div className="grid gap-2">
                    <Label htmlFor="emergencyPhone">Teléfono *</Label>
                    <Input
                      id="emergencyPhone"
                      type="tel"
                      placeholder="+56 9 1234 5678"
                      required
                      value={formData.emergencyContactPhone}
                      onChange={(e) => setFormData({ ...formData, emergencyContactPhone: e.target.value })}
                    />
                  </div>
                </div>
              </div>

{error && (
                <Alert variant="destructive">
                  <AlertCircle className="h-4 w-4" />
                  <AlertDescription>{error}</AlertDescription>
                </Alert>
              )}

<Button
                type="submit"
                className="w-full h-12 bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-lg"
                disabled={isLoading}
              >
                {isLoading ? "Guardando..." : "Completar Perfil"}
              </Button>

<div className="text-center text-sm text-gray-600 pt-4">
                <p>
                  Para verificación de identidad adicional, recomendamos usar{" "}
                  <a
                    href="https://www.veriff.com"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-purple-600 underline"
                  >
                    Veriff
                  </a>{" "}
                  o{" "}
                  <a
                    href="https://onfido.com"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-purple-600 underline"
                  >
                    Onfido
                  </a>
                </p>
              </div>
            </form>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/auth/verify-email/page.tsx" isMerged="true"
import { Mail, ArrowLeft } from "lucide-react"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function VerifyEmailPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-pink-50 via-purple-50 to-teal-50 flex items-center justify-center p-4">
      <div className="w-full max-w-md">
        <div className="bg-white rounded-3xl shadow-lg p-8 text-center">
          <div className="w-20 h-20 bg-gradient-to-br from-pink-400 to-purple-400 rounded-full flex items-center justify-center mx-auto mb-6">
            <Mail className="w-10 h-10 text-white" />
          </div>

<h1 className="text-3xl font-bold text-gray-900 mb-4">Verifica tu Email</h1>

<p className="text-gray-600 mb-6 leading-relaxed">
            Te hemos enviado un correo de verificación. Por favor revisa tu bandeja de entrada y haz clic en el enlace
            para verificar tu cuenta.
          </p>

<div className="bg-pink-50 border border-pink-200 rounded-2xl p-4 mb-6">
            <p className="text-sm text-pink-800">
              <strong>Importante:</strong> No podrás iniciar sesión hasta que verifiques tu email. Si no ves el correo,
              revisa tu carpeta de spam.
            </p>
          </div>

<Link href="/auth/login">
            <Button className="w-full bg-gradient-to-r from-pink-500 to-purple-500 hover:from-pink-600 hover:to-purple-600 text-white rounded-full h-12 text-lg font-semibold">
              <ArrowLeft className="w-5 h-5 mr-2" />
              Volver al Login
            </Button>
          </Link>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/auth/login/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { useState } from "react"

export default function LoginPage() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [error, setError] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()

const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault()
    const supabase = createClient()
    setIsLoading(true)
    setError(null)

try {
      const { data, error } = await supabase.auth.signInWithPassword({
        email,
        password,
      })
      if (error) throw error

if (data.user && !data.user.email_confirmed_at) {
        setError("Por favor verifica tu email antes de iniciar sesión. Revisa tu bandeja de entrada.")
        await supabase.auth.signOut()
        setIsLoading(false)
        return
      }

router.push("/home")
    } catch (error: unknown) {
      setError(error instanceof Error ? error.message : "An error occurred")
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="flex min-h-screen w-full items-center justify-center p-6 bg-gradient-to-br from-pink-50 via-purple-50 to-teal-50">
      <div className="w-full max-w-sm">
        <Card className="shadow-lg border-0">
          <CardHeader className="space-y-2 text-center">
            <CardTitle className="text-3xl font-bold bg-gradient-to-r from-pink-500 to-purple-600 bg-clip-text text-transparent">
              SafeMove
            </CardTitle>
            <CardDescription className="text-base">Welcome back! Sign in to your account</CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleLogin}>
              <div className="flex flex-col gap-4">
                <div className="grid gap-2">
                  <Label htmlFor="email">Email</Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="tu@email.com"
                    required
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    className="h-11"
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="password">Password</Label>
                  <Input
                    id="password"
                    type="password"
                    required
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    className="h-11"
                  />
                </div>
                {error && <p className="text-sm text-red-500 bg-red-50 p-3 rounded-lg">{error}</p>}
                <Button
                  type="submit"
                  className="w-full h-11 bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700"
                  disabled={isLoading}
                >
                  {isLoading ? "Signing in..." : "Sign In"}
                </Button>
              </div>
              <div className="mt-6 text-center text-sm">
                Don't have an account?{" "}
                <Link
                  href="/auth/sign-up"
                  className="font-semibold text-purple-600 hover:text-purple-700 underline underline-offset-4"
                >
                  Sign up
                </Link>
              </div>
            </form>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/003_add_profile_trigger.sql"
-- Create a trigger to automatically create a profile when a user signs up
create or replace function public.handle_new_user()
returns trigger
language plpgsql
security definer set search_path = public
as $$
begin
  insert into public.profiles (id, email, full_name, profile_completed)
  values (
    new.id,
    new.email,
    coalesce(new.raw_user_meta_data->>'full_name', ''),
    false
  );
  return new;
end;
$$;

-- Trigger the function every time a user is created
drop trigger if exists on_auth_user_created on auth.users;
create trigger on_auth_user_created
  after insert on auth.users
  for each row execute function public.handle_new_user();
[V0_FILE]typescriptreact:file="app/auth/sign-up/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"

export default function SignUpPage() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [fullName, setFullName] = useState("")
  const [repeatPassword, setRepeatPassword] = useState("")
  const [error, setError] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const [showSuccess, setShowSuccess] = useState(false)
  const router = useRouter()

const handleSignUp = async (e: React.FormEvent) => {
    e.preventDefault()
    const supabase = createClient()
    setIsLoading(true)
    setError(null)

if (password !== repeatPassword) {
      setError("Las contraseñas no coinciden")
      setIsLoading(false)
      return
    }

if (password.length < 6) {
      setError("La contraseña debe tener al menos 6 caracteres")
      setIsLoading(false)
      return
    }

try {
      const { data, error } = await supabase.auth.signUp({
        email,
        password,
        options: {
          emailRedirectTo: process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || `${window.location.origin}/auth/login`,
          data: {
            full_name: fullName,
          },
        },
      })

if (error) throw error

if (data.user) {
        setShowSuccess(true)
      }
    } catch (error: unknown) {
      setError(error instanceof Error ? error.message : "Ocurrió un error")
    } finally {
      setIsLoading(false)
    }
  }

if (showSuccess) {
    return (
      <div className="flex min-h-screen w-full items-center justify-center p-6 bg-gradient-to-br from-pink-50 via-purple-50 to-teal-50">
        <div className="w-full max-w-md">
          <Card className="shadow-lg border-0">
            <CardHeader className="space-y-2 text-center">
              <div className="mx-auto w-16 h-16 bg-gradient-to-r from-pink-500 to-purple-600 rounded-full flex items-center justify-center mb-4">
                <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                  />
                </svg>
              </div>
              <CardTitle className="text-2xl font-bold">Revisa tu correo</CardTitle>
              <CardDescription className="text-base">
                Hemos enviado un enlace de verificación a <strong>{email}</strong>
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <p className="text-sm text-center text-muted-foreground">
                Haz clic en el enlace del correo para verificar tu cuenta. Después de verificar, podrás iniciar sesión y
                completar tu perfil.
              </p>
              <Button
                onClick={() => router.push("/auth/login")}
                className="w-full h-11 bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700"
              >
                Ir a Iniciar Sesión
              </Button>
            </CardContent>
          </Card>
        </div>
      </div>
    )
  }

return (
    <div className="flex min-h-screen w-full items-center justify-center p-6 bg-gradient-to-br from-pink-50 via-purple-50 to-teal-50">
      <div className="w-full max-w-sm">
        <Card className="shadow-lg border-0">
          <CardHeader className="space-y-2 text-center">
            <CardTitle className="text-3xl font-bold bg-gradient-to-r from-pink-500 to-purple-600 bg-clip-text text-transparent">
              Join SafeMove
            </CardTitle>
            <CardDescription className="text-base">Create your account and start connecting</CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSignUp}>
              <div className="flex flex-col gap-4">
                <div className="grid gap-2">
                  <Label htmlFor="fullName">Full Name</Label>
                  <Input
                    id="fullName"
                    type="text"
                    placeholder="Maria Silva"
                    required
                    value={fullName}
                    onChange={(e) => setFullName(e.target.value)}
                    className="h-11"
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="email">Email</Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="tu@email.com"
                    required
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    className="h-11"
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="password">Password</Label>
                  <Input
                    id="password"
                    type="password"
                    required
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    className="h-11"
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="repeat-password">Confirm Password</Label>
                  <Input
                    id="repeat-password"
                    type="password"
                    required
                    value={repeatPassword}
                    onChange={(e) => setRepeatPassword(e.target.value)}
                    className="h-11"
                  />
                </div>
                {error && <p className="text-sm text-red-500 bg-red-50 p-3 rounded-lg">{error}</p>}
                <Button
                  type="submit"
                  className="w-full h-11 bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700"
                  disabled={isLoading}
                >
                  {isLoading ? "Creating account..." : "Sign Up"}
                </Button>
              </div>
              <div className="mt-6 text-center text-sm">
                Already have an account?{" "}
                <Link
                  href="/auth/login"
                  className="font-semibold text-purple-600 hover:text-purple-700 underline underline-offset-4"
                >
                  Sign in
                </Link>
              </div>
            </form>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This